.root {
    .topbar {
        position: relative;
        padding-top: 8.93vw;
        padding-bottom: 3.47vw;
        width: 100%;
        text-align: center;
        font-size: 4.8vw;
        font-weight: 100;
        color: #333333;
        border-bottom: .13vw solid #b7b7b7;

        img {
            position: absolute;
            bottom: 3.6vw;
            left: 2.8vw;
            width: 3.67vw;
        }
    }

    .cart {
        background-color: #f4f4f4;
        padding-bottom: 2.8vw;

        li {
            position: relative;
            padding: 0 2.8vw 0 3.47vw;
            height: 27.33vw;
            margin-bottom: 2.8vw;
            background-color: #fff;
            display: flex;
            align-items: center;

            &:last-child {
                margin-bottom: 0;
            }

            .delete {
                position: absolute;
                top: 2.8vw;
                right: 2.8vw;
                width: 4.67vw;
                height: 4.67vw;
            }

            .checkbox {
                width: 4.13vw;
                height: 4.13vw;
            }

            .cart_img {
                width: 21.33vw;
                height: 21.33vw;
                margin: 0 3.33vw 0 4.27vw;
            }

            .info {
                .text {

                    .title {
                        font-size: 3.47vw;
                        color: #555555;
                    }

                    .size {
                        margin-top: 2.27vw;
                        font-size: 3.2vw;
                        color: #999999;
                        margin-bottom: 3.00vw;
                    }

                    .money {
                        font-size: 3.47vw;
                        color: #555555;
                    }
                }

                .number {
                    display: flex;
                    align-items: flex-end;

                    .option {
                        margin-left: 13.6vw;
                        display: flex;

                        .minus,
                        .add,
                        .main {
                            display: block;
                            margin: 0;
                            padding: 0;
                            width: 10.93vw;
                            text-align: center;
                            line-height: 7.07vw;
                            font-size: 3.47vw;
                            color: #999999;
                            border: 1px solid #f4f4f4;
                        }
                    }
                }
            }


        }
    }

    .like {
        padding: 0 2.8vw;

        .bannerbar {
            padding: 4.8vw 0;
            font-size: 3.73vw;
            text-align: center;
            color: #333333;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                &:nth-child(2n) {
                    margin-right: 0;
                }
            }

            .product {
                margin-bottom: 5.33vw;

                img {
                    width: 45.87vw;
                    height: 46.67vw;
                }

                .text {
                    padding-left: 2vw;

                    .title {
                        margin-top: 2.8vw;
                        font-size: 3.47vw;
                        color: #333333;
                    }

                    .money {
                        margin-top: 1.53vw;
                        font-size: 3.47vw;
                        color: #c55a5c;

                        .number {
                            margin-left: .67vw;
                        }
                    }
                }
            }
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;

        .all {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100vw;
            height: 12.93vw;
            font-size: 3.73vw;
            border-top: .4vw solid #eaeaea;
            background-color: #fff;

            span {
                display: inline-block;
            }

            .allcheck {
                margin-left: 3.6vw;
                width: 4.13vw;
            }

            .textall {
                margin-left: 4.8vw;
                color: #999999;
            }

            .money {
                margin-left: 32.13vw;
                color: #c55a5c;
            }

            .button {
                margin-left: 2.67vw;
                width: 30vw;
                text-align: center;
                line-height: 12.8vw;
                color: #ffffff;
                background-color: #e5e5e5;
            }

            .active {
                background-color: #c55a5c;

            }
        }

        .footerbar {

            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 7.6vw;
            width: 100vw;
            height: 12.8vw;
            background-color: #fbfbfb;
            border-top: .4vw solid #eaeaea;

            li {
                text-align: center;

                img {
                    width: 5.6vw;
                    height: 5.33vw;
                }

                .title {
                    font-size: 2.4vw;
                    color: #555555;
                }
            }
        }
    }

    .goup {
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 30.40vw;
        right: 5vw;
        width: 10vw;
        height: 10vw;
        text-align: center;
        border-radius: 50%;
        border: 1px solid #eeeeee;
        background-color: #fff;

        img {
            width: 100%;
        }
    }
}